<template>
  <view class="menu">
    <view class="no-data" v-if="goods.length === 0">
      <uv-empty mode="data" title="暂无数据"></uv-empty>
    </view>
    <view class="box" v-else v-for="item in goods" :key="item.id">
      <view class="content">
        <uv-image
            width="80"
            height="80"
            :src="item.img"
        ></uv-image>
        <view class="right">
          <view class="status">{{ item.status }}</view>
          <view class="title">{{ item.title }}</view>
          <view class="bottom">
            <view class="price">￥{{ item.price }}</view>
            <view class="num">X{{ item.quantity }}</view>
          </view>
        </view>
      </view>
      <view class="btn">
        <template v-if="item.status === '待付款'">
          <uv-button text="取消订单" />
          <uv-button type="primary" text="立即支付" />
        </template>
        <template v-else-if="item.status === '待发货' || item.status === '待收货'">
          <uv-button type="primary" @click="detailFn(item.order_code)" text="订单详情" />
          <uv-button type="primary" @click="commentFn(item.id)" text="立即评价" />
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  goods: {
    type: Array,
    required: true
  }
});
const detailFn = (id) => {
  uni.navigateTo({
    url: '/pages/menu/menu?id='+id
  })
}
const commentFn = (id) => {
  uni.navigateTo({
    url: "/pages/comment/comment?id="+id
  })
}
</script>


<style scoped lang="scss">
.menu{
  width: 100%;
  height: calc(100vh - 88px);
  overflow: auto;
  margin-top: 46px;
  .no-data{
    width: 100%;
    height: 100%;
    background-color: #f5f7fa;
    margin-top: 100px;
  }
  .box{
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-top: 10px;
    .content{
      display: flex;
      align-items: center;

      width: 100%;
      .right{
        margin-left: 10px;
        width: calc(100% - 90px);
        .status{
          color: #3c9cff;
          width: 100%;
          display: flex;
          justify-content: flex-end;
        }
        .title {
          margin-top: 8px;
          display: -webkit-box;        /* 使用 flexbox */
          -webkit-box-orient: vertical; /* 垂直排列 */
          -webkit-line-clamp: 2;      /* 限制为两行 */
          overflow: hidden;           /* 隐藏超出部分 */
          text-overflow: ellipsis;    /* 显示省略号 */
        }
        .bottom{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 8px;
          .price{
            color: red;
          }
        }
      }
    }
    .btn{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      align-items: center;
      margin-top: 8px;
    }
  }

}
</style>